<template>
  <el-dialog :title="title" :visible.sync="open" width="70%"  @close="closeForm" append-to-body>
    <el-form ref="form" :model="form"  label-width="80px" label-position="top" class="form-font-class">
      <div v-show="step1">
        <el-form-item label="检测项目" prop="testItem">
          <el-radio-group v-model="form.applyForm.testItem" :disabled="type == 'detail'">
            <el-radio label="1">CAOL02 肠癌多基因甲基化检测项目·检测版</el-radio>
            <el-radio label="0">CAOL01 肠癌多基因甲基化检测项目·标准版</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="风险稽核问卷">
          <el-row>
            <el-col :span="8">
              【姓名】{{form.applyForm.name}}
            </el-col>
            <el-col :span="8">
              【性别】{{form.applyForm.sex=='male'?'男':'女'}}
            </el-col>
            <el-col :span="8">
              【年龄】{{form.applyForm.age}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              【采样日期】{{moment(form.applyForm.createTime).format('YYYY-MM-DD')}}
            </el-col>
            <el-col :span="8">
              【联系电话】{{form.applyForm.phone}}
            </el-col>

            <el-col :span="8">
              【身份证号】{{form.applyForm.idNo}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              【样本编号】{{form.applyForm.sampleNo}}
            </el-col>
            <el-col :span="8">
              【婚姻状况】{{form.applyForm.maritalStatus =='1'?'已婚':'单身'}}
            </el-col>
            <el-col :span="8">
              【生育史】{{form.applyForm.childbearingHistory}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              【文化程度】 {{educationDegreeObj[form.applyForm.educationDegree]}}
            </el-col>
            <el-col :span="8">
              【职业】 {{careerObj[form.applyForm.career]}}
            </el-col>
            <el-col :span="8">
              【身高】 {{form.applyForm.height + '厘米'}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              【体重】{{form.applyForm.weight + '千克'}}
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="病状史">
          <el-row :gutter="20">
            <el-col :span="12" class="rickItem">
              <div>
                <span>1.有无慢性腹泻史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.diarrhea" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
            <el-col :span="12" class="rickItem">
              <div>
                <span>2.有无慢性便秘史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.astriction" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="rickItem">
              <div>
                <span>3.有无黏液或便血史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.hemafecia" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
            <el-col :span="12" class="rickItem">
              <div>
                <span>4.有无慢性阑尾炎或阑尾切除史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.appendicitis" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="rickItem">
              <div>
                <span>5.有无慢性胆囊炎或胆囊切除史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.cholecystitis" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
            <el-col :span="12" class="rickItem">
              <div>
                <span>6.有无慢性肠炎史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.enteritis" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="rickItem">
              <div>
                <span>7.近20年来有无经历过对精神造成较大创伤或痛苦的事件</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.psychologicalTrauma" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>

            </el-col>
            <el-col :span="12" class="rickItem">
              <div>
                <span>8.有无癌症史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.cancer" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
              <div class="caseDetail" v-if="form.applyForm.cancer == 1">
                <p>如有癌症史，请具体描述:</p>
                <div class="caseDetailIntro">
                  <span>癌种:<input class="editInput" type="text"  v-model="form.applyForm.cancerType" :disabled="type == 'detail'" /></span>
                  <span>发病年龄:<input class="editInput" type="text"  v-model="form.applyForm.haveCancerAge" :disabled="type == 'detail'"></span>
                </div>
                <div>
                  <span>诊断医院:<input class="editInput" type="text"  v-model="form.applyForm.diagnosisHospital" :disabled="type == 'detail'"></span>
                </div>
              </div>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="rickItem">
              <div>
                <span>9.有无肠息肉史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.intestinalPolyp" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
            <el-col :span="12" class="rickItem">
              <div>
                <span>10. 一级亲属有肠癌史，那么请填写该亲属的</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.directRelativeIntestinalCancer" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                      <el-radio label="2">不详</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
              <div class="caseDetail" style="clear: both" v-if="form.applyForm.directRelativeIntestinalCancer == 1">
                <div class="caseDetailIntro">
                  <span>姓名:<input class="editInput" type="text"  v-model="form.applyForm.directRelativeName" :disabled="type == 'detail'"/></span>
                  <span>发病年龄:<input class="editInput" type="text"  v-model="form.applyForm.directRelativeCancerAge" :disabled="type == 'detail'" /></span>
                </div>
                <div>
                  <span>与本人关系:<input class="editInput" type="text"  v-model="form.applyForm.directRelative" :disabled="type == 'detail'"></span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="rickItem">
              <div>
                <span>11.有无吸烟史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.smoking" :disabled="type == 'detail'">
                      <el-radio label="1">有(包含戒烟者)</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
            <el-col :span="12" class="rickItem">
              <div>
                <span>12.有无饮酒史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.drink" :disabled="type == 'detail'">
                      <el-radio label="1">有(包含戒酒者)</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="rickItem">
              <div>
                <span>13.有无糖尿病史等既往病史</span>
                <span class="spanRadio">
                  <template>
                     <el-radio-group v-model="form.applyForm.diabetes" :disabled="type == 'detail'">
                      <el-radio label="1">有</el-radio>
                      <el-radio label="0">无</el-radio>
                    </el-radio-group>
                  </template>
                </span>
              </div>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row>
            <el-col>
              <div style="line-height: 1.8">14.合并用药情况:
                <div :contenteditable="type == 'edit'" ref="editor1"  v-on:input="getDrugCombinationData"
                     tabindex="1" v-html="form.applyForm.drugCombination" class="contenteditableDiv"></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div style="line-height: 1.8">15.其他非必填项:
                <div :contenteditable="type == 'edit'" ref="editor2"  v-on:input="getOthersData"
                     tabindex="2" v-html="form.applyForm.others" class="contenteditableDiv"></div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="text-center">
          <el-button type="primary" class="text-center" round @click="goPage('1')">下一页</el-button>
        </div>

      </div>
      <div v-show="step2">
        <div class="addBorderBottom">
          <div class="add20Margin">
            <h3>知情同意书:</h3>
            <p class="pText">
              我已经阅读了这份知情同意书，已经获得关于此研究的背景、目的、研究步骤、风险及获益情况，针对该临床研究的相关问题 我有足够的时间和机会进行提问，并已得到满意的解答。我理解参加这项研究是自愿的。我允许按知情同意书中所述使用和共享我的医疗信息。我知道自己可以随时退出本研究而不会遭受利益损失或其他不利后果。我愿意配合研究人员做相关的检查或者治疗。我知道参加此项研究个人身份和隐私将被严格保密。我也被告知，当我有问题或想进一步获得信息应当与谁联系。我将获得一份已签字并注明日期的此知情同意书的副本。
            </p>
            <div>
              <el-row :gutter="20" class="mb10">
                <el-col :span="12">
                  <span class="step2Text">受试者签字(印刷体):</span>
                  <input type="text"  class="step2Input" v-model="form.contractInfo.applyPersonName" readonly>
                </el-col>
                <el-col :span="12">
                  <span class="step2Text">联系电话:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.applyPersonPhone" readonly>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="mb10">
                <el-col :span="12">
                  <span class="step2Text">日期:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.applyPersonSignDate" readonly>
                </el-col>
                <el-col :span="12">
                  <span class="step2Text">受试者签字(手写体):</span>
                  <img :src="form.contractInfo.applyPersonSignImg" v-if="form.contractInfo.applyPersonSignImg"/>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="mb10">
                <el-col>
                  <span class="step2Text">法定代理人签字:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.agentName" readonly>
                  <span>【如适用】(印刷体，请注明和受试者直接关系)</span>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="mb10">
                <el-col :span="12">
                  <span class="step2Text">联系电话:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.agentPhone" readonly>
                </el-col>
                <el-col :span="12">
                  <span class="step2Text">法定代理人签字(手写体):</span>
                  <img :src="form.contractInfo.agentSignImg" v-if="form.contractInfo.agentSignImg"/>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="mb10">
                <el-col>
                  <span class="step2Text">日期:</span>
                  <input type="text" class="step2Input"  v-model="form.contractInfo.agentSignDate" readonly>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="addBorderBottom">
          <div class="add20Margin">
            <h3>公证人【如适用】:</h3>
            <p class="pText">
              本人证明：本知情同意书中的所有信息及任何其他书面信息已准确地向受试者或其监护人进行了解释，且受试者或其监护人已 充分理解这些信息。本人同时证明：受试者(或由其监护人代表)自愿同意继续研究药物的治疗，并继续参加这项研究。          </p>
            <div>
              <el-row :gutter="20" class="mb10">
                <el-col :span="12">
                  <span class="step2Text">公正见证人签字(印刷体):</span>
                  <input type="text"  class="step2Input" v-model="form.contractInfo.witnessName" readonly>
                </el-col>
                <el-col :span="12">
                  <span class="step2Text">联系电话:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.witnessPhone" readonly>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="mb10">
                <el-col :span="12">
                  <span class="step2Text">公正见证人签字(手写体):</span>
                  <img :src="form.contractInfo.witnessSignImg" v-if="form.contractInfo.witnessSignImg"/>
                </el-col>
                <el-col :span="12">
                  <span class="step2Text">日期:</span>
                  <input type="text" class="step2Input"  v-model="form.contractInfo.witnessSignDate" readonly>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="mb10">
                <el-col :span="12">
                  <span class="step2Text">身份证号码:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.witnessIdNo" readonly>
                </el-col>
                <el-col :span="12">
                  <span class="step2Text">住址:</span>
                  <input type="text" class="step2Input" v-model="form.contractInfo.witnessAddr" readonly>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="addBorderBottom">
          <div class="add20Margin">
            <h3>执行知情同意的研究者声明:</h3>
            <p class="pText">
              我或我的研究团队已向该受试者充分解释和说明了本临床研究的背景、目的、研究步骤、风险及获益情况，给予他/她足够的时间阅读 知情同意书、与他人讨论，并解答了其有关研究的问题；我已告知该受试者当遇到问题时的联系方式；我已告知该受试者(或法定代 理人) 他/ 她可以在研究期间的任何时候无需任何理由退出本研究          <div>
            <el-row :gutter="20" class="mb10">
              <el-col :span="12">
                <span class="step2Text">研究者签字 (印刷体):</span>
                <input type="text"  class="step2Input" v-model="form.contractInfo.researcherName" readonly>
              </el-col>
              <el-col :span="12">
                <span class="step2Text">联系电话:</span>
                <input type="text" class="step2Input" v-model="form.contractInfo.researcherPhone" readonly>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mb10">
              <el-col :span="12">
                <span class="step2Text">研究者签字(手写体):</span>
                <img :src="form.contractInfo.researcherSignImg" v-if="form.contractInfo.researcherSignImg"/>

              </el-col>
              <el-col :span="12">
                <span class="step2Text">日期:</span>
                <input type="text" class="step2Input" v-model="form.contractInfo.researcherSignDate"  readonly>
              </el-col>
            </el-row>
          </div>
          </div>
        </div>

        <div class="text-center mt20" v-if="type == 'detail'">
          <el-button  class="text-center" round @click="goPage('2')">上一页</el-button>
          <el-button  class="text-center" round @click="contractPdfFn1">PDF下载</el-button>
          <el-button type="primary" class="text-center" round @click="contractPdfFn2">PDF预览</el-button>
        </div>
        <div class="text-center mt20" v-if="type == 'edit'">
          <el-button  class="text-center" round @click="goPage('2')">上一页</el-button>
          <el-button  class="text-center" round @click="closeForm">取消</el-button>
          <el-button type="primary" class="text-center" round @click="submitForm">确定</el-button>
        </div>
      </div>

    </el-form>
  </el-dialog>
</template>

<script>
import { formGetApplyFormContractDetailById , formViewContractPdf, formUpdate} from "@/api/singera/applyForm";
import { downloadPDFFn} from "@/utils/index";
export default {
  name: "contractView",
  data(){
    return{
      id: undefined,
      type: undefined,
      step1: true,
      step2: false,
      radio: '1',
      // 弹出层标题
      title: "肠癌多基因甲基化检测项目申请单",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        applyForm: {},   // 申请单信息
        contractInfo: {}  // 合同信息
      },
      testItemOptionsObj: {},
      careerObj: {},
      educationDegreeObj:{
        '0': '文盲',
        '1': '小学',
        '2': '中专、中学',
        '3': '大学、大专',
        '4': '研究生'
      }
    }
  },
  methods: {
    // 动态获取div中输入的数据
    getDrugCombinationData(){
      this.form.applyForm.drugCombination = this.$refs.editor1.innerHTML;
    },
    getOthersData(){
      this.form.applyForm.others = this.$refs.editor2.innerHTML;
    },
    /** 提交按钮 */
    submitForm: function () {
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     if (this.form.configId != undefined) {
      //       updateConfig(this.form).then(response => {
      //         this.msgSuccess("修改成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     } else {
      //       addConfig(this.form).then(response => {
      //         this.msgSuccess("新增成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     }
      //   }
      // });
      formUpdate(this.form.applyForm).then(response => {
        this.msgSuccess("修改成功");
        this.closeForm()
      });
    },

    init(params){
      this.id = params.id
      this.type = params.type
      this.testItemOptionsObj = params.testItemOptionsObj
      this.careerObj = params.careerObj
      formGetApplyFormContractDetailById(params.id).then(response => {
        this.open = true
        this.form.applyForm = response.applyForm;
        this.form.contractInfo = response.contractInfo;
        if(this.form.contractInfo.researcherSignDate){
          this.form.contractInfo.researcherSignDate = this.moment(this.form.contractInfo.researcherSignDate).format('YYYY-MM-DD')
        }
        if(this.form.contractInfo.witnessSignDate){
          this.form.contractInfo.witnessSignDate = this.moment(this.form.contractInfo.witnessSignDate).format('YYYY-MM-DD')
        }
        if(this.form.contractInfo.agentSignDate){
          this.form.contractInfo.agentSignDate = this.moment(this.form.contractInfo.agentSignDate).format('YYYY-MM-DD')
        }
        if(this.form.contractInfo.applyPersonSignDate){
          this.form.contractInfo.applyPersonSignDate = this.moment(this.form.contractInfo.applyPersonSignDate).format('YYYY-MM-DD')
        }
        console.log(this.form)
      });

    },
    // 取消按钮或者关闭右上角
    closeForm(){
      this.open = false
      this.$emit('viewContractClose')
    },
    goPage(num){
      this.step1 = num == 1?false: true
      this.step2 = num == 1?true: false
    },
    contractPdf(id){
      return new Promise(resolve => {
        formViewContractPdf(id).then(response => {
          resolve(response)
        });
      })
    },
    // 本地下载pdf文件
    contractPdfFn1(){
      console.log(this.form)
      const date = new Date(this.form.applyForm.createTime).getFullYear().toString() + ((new Date(this.form.applyForm.createTime).getMonth() + 1) < 10 ? ('0' + (new Date(this.form.applyForm.createTime).getMonth() + 1)) : (new Date(this.form.applyForm.createTime).getMonth() + 1).toString()) + (new Date(this.form.applyForm.createTime).getDate() < 10 ? ('0' + new Date(this.form.applyForm.createTime).getDate()) : new Date(this.form.applyForm.createTime).getDate())
      this.contractPdf(this.id).then(res =>{
        // debugger
        downloadPDFFn(res, date + '-' + this.form.applyForm.sampleNo + '-' + this.form.applyForm.name + (parseInt(this.form.applyForm.testItem) === 1 ? '-CAOL02肠癌多基因甲基化检测项目·检测版' : '-CAOL01肠癌多基因甲基化检测项目·标准版'))
      })
    },
    //pdf操作--预览
    contractPdfFn2(){
      this.contractPdf(this.id).then(res =>{
        // res
        let openUrl = window.URL.createObjectURL(res)
        window.open(openUrl)
        // window.open(process.env.VUE_APP_PROJECT_ROOT + 'pdfjs/web/viewer.html?file=' + openUrl + '&.pdf')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form-font-class{
  font-family: DengXian-Bold, DengXian;
  img{
    width: 50%;
    vertical-align: middle;
  }
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.rickItem{
  //display: flex;
  //justify-content: space-between;
  &>div{
    width: 100%;
    .spanRadio{
      float: right;
    }
    .caseDetailIntro{
      display: flex;
      justify-content: space-between;
    }
  }
}
::v-deep .el-radio{
  margin-right: 10px;
}
.contenteditableDiv{
  border-bottom: 1px solid #666;
  display: inline;
}
.editInput{
  border: none;
  border-bottom: 1px solid #666;
  outline: none;
}
.step2Input{
  border: none;
  border-bottom: 1px solid #666;
  outline: none;
}
.step2Text{
  font-size: 15px;
  font-family: DengXian-Bold, DengXian;
  font-weight: bold;
  color: #333333;
}
h3{
  font-size: 20px;
  font-family: DengXian-Bold, DengXian;
  font-weight: bold;
  color: #333333;
}
.pText{
  font-size: 15px;
  font-family: DengXian-Regular, DengXian;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
}
.addBorderBottom{
  margin: 0 -20px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  .add20Margin{
    margin: 0 20px;
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: '';
  width:8px;
  height: 4px;
  border: 2px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
::v-deep .el-radio__input.is-checked .el-radio__inner, .el-button--primary{
  background: #004EA2;
  border: 1px solid #004EA2;
}
::v-deep .el-radio__input.is-checked + .el-radio__label{
  color: #004EA2;
}
</style>
